<script setup>
import { SearchOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
import CreateRole from './components/CreateRole.vue'
import { roleList,roleDelete} from "@/apis/systemManaging/role"
import { onMounted, reactive, ref, watch, nextTick, provide } from 'vue';
import { message } from 'ant-design-vue';
import Pagination from "@/components/Pagination/Pagination.vue";
const columns = [
    {
        title: '角色编号',
        dataIndex: 'id',
        align: 'center',
        fixed: 'left',
    },
    {
        title: '角色名称',
        dataIndex: 'roleName',
        align: 'center',
    },
    {
        title: '权限字符',
        dataIndex: 'roleCode',
        align: 'center',
    },
    {
        title: '更新时间',
        dataIndex: 'createTime',
        align: 'center',
    },
    {
        title: '创建时间',
        dataIndex: 'updateTime',
        align: 'center',
    },
    {
        title: '备注',
        dataIndex: 'description',
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'operate',
        align: 'center',
        width: 140,
        fixed: 'right',
    },
];
const loading = ref(true);
const tableRef = ref(null);
const roleRef = ref(null);
const tableHeight = ref(0);
const dataSource = ref(null);
const formState = reactive({
    page: 1,
    size: 10,
    cid: null,
})
const total = ref(0);
onMounted(() => {
    // nextTick(() => {
    //     if (dataSource.value) {
    //         let box = tableRef.value;
    //         let top = box.children[0].getBoundingClientRect().top;
    //         tableHeight.value = window.innerHeight - top - 54 - 64 - 30;
    //     }
    // })
})
onMounted(()=>{
    getRoleList();
})
provide("getList",()=>getRoleList())
const getRoleList=async()=>{
    loading.value=true
    let roleRes=await roleList();
    if(roleRes.code===200){
        dataSource.value=roleRes.data
        loading.value=false
    }
}
    
const handleCreateRole = () => {
    roleRef.value.open = true;
    roleRef.value.titleflag = true;
}
const changepage=(options)=>{
    loading.value = true;
    formState.page = options.page;
    formState.size = options.pageSize;
}
const roleEdit=(options)=>{
    roleRef.value.titleflag = false;
    for (const key in roleRef.value.formState){
        options[key]&&(roleRef.value.formState[key]=options[key])
    };
    roleRef.value.open = true;
}
const handleDelete=async(options)=>{
    loading.value = true;
    let res=await roleDelete({id:options.id});
    if(res.code===200){
        getRoleList();
    }
}
</script>
<template>
    <div class="role-container outerlayer-container">
        <div class="search top-search-container">
            <!-- <a-button type="primary" >
                <template #icon>
                    <SearchOutlined />
                </template>
                搜索
            </a-button>&nbsp; -->
            <a-button type="primary" @click="handleCreateRole">
                <template #icon>
                    <PlusCircleOutlined />
                </template>
                新增角色
            </a-button>
        </div>
        <div ref="tableRef" class="main-content-container">
            <a-table :loading="loading" :columns="columns" :data-source="dataSource" rowKey="id" :pagination="false"
                :scroll="{ x: 'max-content'}">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'operate'">
                        <div class="">
                            <a-button type="link" size="small" @click="roleEdit(record)">编辑</a-button>
                            <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
                        </div>
                    </template>
                </template>
            </a-table>
            <Pagination :total="total" :page="formState.page" :size="formState.size" @changepage="changepage" />
        </div>
        <create-role ref="roleRef" />
    </div>
</template>


<style lang='scss' scoped>
.role-container {
    .search {
        display: flex;
        margin-bottom: 10px;
    }
}
</style>